<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form action="" method="post">
        你爱好的运动？
        <input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />

        <input type="checkbox" name="items" id="" value="足球" />足球
        <input type="checkbox" name="items" id="" value="篮球" />篮球
        <input type="checkbox" name="items" id="" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
        <br />
        <input type="button" name="" id="checkAllBtn" value="全  选" />
        <input type="button" name="" id="checkNoBtn" value="全不选" />
        <input type="button" name="" id="checkRevBtn" value="反  选" />
        <input type="button" name="" id="sendBtn" value="提  交" />
    </form>
</body>
<script type="text/javascript">
    var items = document.getElementsByName("items");
    var checkAllBtn = document.getElementById("checkAllBtn");
    checkAllBtn.onclick = function () {
        for (i = 0; i < items.length; i++) {
            items[i].checked = true;
        }
        checkedAllBox.checked = true;
    };
    var checkNoBtn = document.getElementById("checkNoBtn");
    checkNoBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {
            items[i].checked = false;
        }
        checkedAllBox.checked = false;
    };
    var checkRevBtn = document.getElementById("checkRevBtn");
    checkRevBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {
            items[i].checked = !items[i].checked;
        }
        checkedAllBox.checked = true;
        for (j = 0; j < items.length; j++) {
            if (!items[j].checked) {
                checkedAllBox.checked = false;
                break;
            }
        }
    };
    var sendBtn = document.getElementById("sendBtn");
    sendBtn.onclick = function () {

        for (i = 0; i < items.length; i++) {
            if (items[i].checked) {
                alert(items[i].value);
            }
        }
    };
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function () {
        for (i = 0; i < items.length; i++) {
            items[i].checked = checkedAllBox.checked;
        }
    };
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function () {
            checkedAllBox.checked = true;
            for (j = 0; j < items.length; j++) {
                if (!items[j].checked) {
                    checkedAllBox.checked = false;
                    break;
                }
            }
        };
    }
</script>

</html>